<template>
  <div class="Head">
    <div class="left">
      <img src="../assets/show.png" alt="" />
    </div>
    <div class="right">
      <el-select v-model="val" placeholder="个人中心" @change="index">
        <el-option
          v-for="item in mycenter"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </div>
  </div>
</template>
<script>

export default {
  name: 'Head',
  data () {
    return {
      val: '',
      mycenter: [{ value: 1, label: '修改密码' }, { value: 2, label: '退出登录' }]
    }
  },
  methods: {
    index (params) {
      console.log(params);   //params为选中的value值
      if (params == 1) {
        this.$router.push('/person')
      } else if (params == 2) {
        this.$router.push('/')
      }
    }
  }
}
</script>
<style lang="less">
.Head {
  display: flex;
  justify-content: space-between;
  .left {
    width: 48px;
    height: 60px;
    margin-left: -20px;
    background-color: #545c64;
    border: 3px solid #545c64;
    text-align: center;
    img {
      display: block;
      margin-top: 14px;
      width: 32px;
      height: 32px;
    }
  }
  .right {
    width: 120px;
    height: 60px;
    background-color: #545c64;
  }
  .el-select {
    margin-top: 10px;
    padding: 0 2%;
    /deep/ .el-input {
      color: #fff;
      background-color: rgb(51, 65, 87);
      font-size: 16px;
    }
  }
}
</style>